LINE UIT組織でLandPress Contentのバックエンドを開発しています。
LINEでは2年前、従来のヘッドレスCMSの構造とパフォーマンスを改善した新しいヘッドレスCMS、LandPress Contentを社内向けに公開しました。その後、従来のCMSを使用していた多くのLINEサービスがLandPress Contentとして再開発されはじめました。今回の記事では、従来のCMSからヘッドレスCMSに移行する際の注意点や移行後の改善点について紹介します。 ヘッドレスCMS登場の背景 まず、ヘッドレスCMSが登場した背景を見てみましょう。 従来のCMSの問題点 従来のCMSは、下図のようにフロントエンドとバックエンドの組み合わせで一体化されたように動作します。その代表例としてWordPressとMovableTypeがあります。 従来のCMSの構造 「フロントエンドとバックエンドの両方を提供するなんて本当に便利ですね！」と思うかもしれません。しかし、サイトを運営する上でこのようなモノリシック（monolithic）構造は以下のような多くの問題を引き起こします。 パフォーマンスとセキュリティ：モノリシック構造は大容量でコンピューティ
Front-end Engineer
こんにちは！ UIT室 フロントエンド開発1チームの姜 勝陽（kyo shoyo）です。今回はGoogleのオープンソースプロジェクト AMP Projectのお話です。AMP HTMLを使ったマークアップ作業の際に「自作のComponentを作りたい！」「自作の機能を入れたい！」と思った方は多いでしょう。そのような方におすすめの記事となります。 AMPでLINEのシェアが使えるようになりました 2018年5月に、SNSシェアボタンcomponentmp-social-shareにLINEへのシェア機能を追加しました。 amp-social-share Document amp-social-share Example その時の経験を基に、AMP Projectのコードを変更してPRを送る方法について説明します。今回は、既存Componentに機能を追加する事を前提として説明しますので、ご了承ください。 きっかけ 2018年4月にLINEのフロントエンド開発組織のGlobal Workshop "Let’s Contribute OSS!"が開催されました。OSS
ウェブアナリティクスの開発を担当しています。
こんにちは！Frontend Standardizationチームの川崎です。私の所属するStandardizationチームは、LINEのフロントエンド開発組織においてプロダクトに依らず横断的に必要となるツールの開発や、開発者の情報発信やコミュニケーションをより円滑にするための企画を行なっている部署です。今回は、私たちの業務の紹介も兼ねて、先日開催された社内ワークショップについてお話します。 LINEでは各国の開発者がPrivate npmを経由して登録されたパッケージを共有資産として簡単に利用できるようになっています。私たちはGitHub Enterpriseでほとんどすべてのソースコードを共有していて、必要とあらばそれらのパッケージに対して修正を行いプルリクエストを送ることもできます。私たちはオープンソースの世界で同じように振る舞い、その開発に携わることができるはずですが、同僚にプルリクエストを送ることに比べれば難しく感じるのもまた事実です。 そこで、フロントエンド開発組織では「DevWeek Global Workshop」と呼ばれる各国にあるLINEの開発拠点からエンジニア
フロントエンドエンジニアです。2年前に東京からIターンして福岡に来ました。
この記事はLINE Advent Calendar 2017の19日目の記事です。 JavaScriptの気持ちを知りたい こんにちは、LINE FukuokaのフロントエンドエンジニアのYoneharaです。 そろそろクリスマスですね。フロントエンドエンジニアのみなさん、苦しんでいますか？私は苦しんでいます。2017年も暮れようというのに、いまだにブラウザやJavaScriptの気持ちが分からず、ユーザーに思うような快適なUXが提供できないことがあるからです。 JavaScriptの気持ち。ただ幸いなことに、我々はかなりの程度、それを分析的に知ることができます。GoogleやMozillaが自身のJavaScriptエンジンのコードを公開し、随所でそのアーキテクチャを解説してくれており、また豊富なトレーシング・プロファイリングの手段が用意されているからです。 今回の記事では、みなさんおなじみのChromeに採用されているV8というJavaScriptエンジンの、Hidden Classという最適化のための1つの仕組みをのぞいてみたいと思います。 動的型付け言語の辞書の実装には制約があ
LINE Fukuokaで、普段はiOSアプリを開発しています。
こんにちは、LINE Fukuokaのha1fです。この記事はLINE Advent Calendar 2017の8日目の記事です。 現在はiOSアプリの開発を担当していますが、入社前に内定者アルバイトとして社内ツールの作成を担当していました。その時の業務の1つ、アニメーションスタンプチェッカーの作成について書きます。 APNGとは APNG（Animated Portable Network Graphics）はアニメーション用の連番画像の形式で、LINEのアニメーションスタンプでも利用しています。 GIFと比べると、フルカラーを使えたり、アルファチャンネルを持てたり、圧縮率が高かったりという利点があります。 APNGはPNGと互換性があり、APNG非対応の環境でも、通常の静止画として表示されます。ツールを使って、連番のPNG画像などから作成できます。 アニメーションスタンプチェッカー LINEのアニメーションスタンプには、いくつかの制約があります。 例えば、以下のような制約があります。 幅320px×高さ270px以内 幅か高さのどちらかが必ず270px以上 再生時
